.ns-box {
	position: fixed;
	background: rgba(42, 45, 50, 0.85);
	padding: 22px;
	line-height: 1.4;
	z-index: 1000;
	pointer-events: none;
	color: rgba(250, 251, 255, 0.95);
	font-size: 90%;
	font-weight: 600;

	&.ns-show {
		pointer-events: auto;
	}

	a {
		color: inherit;
		opacity: 0.7;
		font-weight: 700;

		&:hover, &:focus {
			opacity: 1;
		}
	}

	p {
		margin: 0;
	}

	&.ns-show, &.ns-visible {
		pointer-events: auto;
	}
}

.ns-close {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	&:hover, &:focus {
		outline: none;
	}

	&::before, &::after {
		content: '';
		position: absolute;
		width: 3px;
		height: 60%;
		top: 50%;
		left: 50%;
		background: #6e6e6e;
	}

	&:hover {
		&::before, &::after {
			background: #fff;
		}
	}

	&::before {
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
		transform: translate(-50%, -50%) rotate(45deg);
	}

	&::after {
		-webkit-transform: translate(-50%, -50%) rotate(-45deg);
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

/* Growl-style notifications */
.ns-growl {
	top: 30px;
	left: 30px;
	max-width: 300px;
	border-radius: 5px;
}

.ns-growl p {
	margin: 0;
	line-height: 1.3;
}

[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

/* Individual effects */

/* Scale */
.ns-effect-scale {
	background: $pink;
	box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
}

.ns-effect-scale a:hover,
.ns-effect-scale a:focus {
	color: $white;
}

.ns-effect-scale .ns-close::before,
.ns-effect-scale .ns-close::after {
	background: $white;
}

.ns-effect-scale .ns-close:hover::before,
.ns-effect-scale .ns-close:hover::after {
	background: $black;
}

.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
	-webkit-animation-name: animScale;
	animation-name: animScale;
	-webkit-animation-duration: 0.25s;
	animation-duration: 0.25s;
}

@-webkit-keyframes animScale {
	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); }
}

@keyframes animScale {
	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); }
}

@media screen and (max-width: 25em) {
	.ns-growl {
		top: 10px;
		left: 10px;
		right: 10px;
		max-width: none;
	}
}
